<template>
  <div id="people">
    <div class="info">
      <div class="person box">
        报修人员
        <p>{{person}}</p>
      </div>
      <div class="bill box">
        报修单
        <p>{{bill}}</p>
      </div>
      <div class="finish box">
        报修完成数
        <p>{{finish}}</p>
      </div>
      <div class="article box">
        文章数量
        <p>{{article}}</p>
      </div>
    </div>
    <!---------------维修员排名--------------->
    <div class="title">维修服务员排名</div>
    <div class="ranks">
      <div class="second Tai">
        <p style="transform:translateX(14px)">
          <span class="el-icon-medal"></span>李秋炯
        </p>
        <div class="taiBox">
          <div>
            <p class="rank2"></p>
          </div>
          <span class="txt">第二名</span>
        </div>
      </div>
      <div class="first Tai">
        <p style="transform:translateX(-4px)">
          <span class="el-icon-medal"></span>李秋炯
        </p>
        <div class="taiBox">
          <p class="rank"></p>
          <span class="txt">第一名</span>
        </div>
      </div>
      <div class="third Tai">
        <p style="transform:translateX(-14px)">
          <span class="el-icon-medal"></span>李秋炯
        </p>
        <div class="taiBox">
          <p class="rank3"></p>
          <span class="txt">第三名</span>
        </div>
      </div>
    </div>
    <!------------------------柱状图---------------------------->
    <div id="chartmain"></div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      person: "666",
      bill: "666",
      finish: "555",
      article: "222",
      first: "李秋炯",
      second: "李秋炯",
      third: "李秋炯"
    };
  },
  mounted() {
    this.drawEchart();
  },
  methods: {
    //echart统计图
    drawEchart() {
      var option = {
        grid: {
          left: "10%",
          top: "12%",
          right: "5%",
          bottom: "8%",
          containLabel: true
        },
        xAxis: [
          {
            show: false
          }
        ],
        yAxis: [
          {
            axisTick: "none",
            axisLine: "none",
            offset: "27",
            axisLabel: {
              textStyle: {
                color: "#0076ab",
                fontSize: "16"
              }
            },
            data: [
              "李师傅",
              "李师傅",
              "李师傅",
              "李师傅",
              "李师傅",
              "李师傅",
              "李师傅"
            ]
          },
          {
            axisTick: "none",
            axisLine: "none",
            axisLabel: {
              textStyle: {
                color: "#0076ab",
                fontSize: "16"
              }
            },
            data: ["7", "6", "5", "4", "3", "2", "1"]
          },
          {
            nameGap: "50",
            axisLine: {
              lineStyle: {
                color: "rgba(0,0,0,0)"
              }
            },
            data: []
          }
        ],
        series: [
          {
            name: "条",
            type: "bar",
            yAxisIndex: 0,
            data: [29, 38, 44, 50, 52, 60, 72],
            label: {
              normal: {
                show: true,
                position: "right",
                textStyle: {
                  color: "#0076ab",
                  fontSize: "16"
                }
              }
            },
            barWidth: 12,
            itemStyle: {
              normal: {
                color: "#0076ab",
                barBorderRadius: 5
              }
            },
            z: 2
          },
          {
            name: "白框",
            type: "bar",
            yAxisIndex: 1,
            barGap: "-100%",
            data: [99.5, 99.5, 99.5, 99.5, 99.5, 99.5, 99.5],
            barWidth: 20,
            itemStyle: {
              normal: {
                color: "#ffffff",
                barBorderRadius: 5
              }
            },
            z: 1
          },
          {
            name: "外框",
            type: "bar",
            yAxisIndex: 2,
            barGap: "-100%",
            data: [100, 100, 100, 100, 100, 100, 100],
            barWidth: 24,
            itemStyle: {
              normal: {
                color: "#0076ab",
                barBorderRadius: 5
              }
            },
            z: 0
          },
          {
            name: "外圆",
            type: "scatter",
            hoverAnimation: true,
            data: [0, 0, 0, 0, 0, 0, 0],
            yAxisIndex: 2,
            symbolSize: 35,
            itemStyle: {
              normal: {
                color: "#0076ab",
                barBorderRadius: 5,
                opacity: 1
              }
            },
            z: 2
          }
        ]
      };
      var myChart = this.$echarts.init(document.getElementById("chartmain"));
      myChart.setOption(option);
      // 窗口大小改变立马重新渲染自适应
      window.addEventListener("resize", function() {
        myChart.resize();
      });
    }
  }
};
</script>

<style lang="scss" scoped>
#people {
  width: 100%;
  .info {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    .box {
      margin: 0 8px;
      margin-bottom: 3px;
      padding: 8px;
      width: 20%;
      height: 46px;
      color: #ffffff;
      border-radius: 5px;
    }
    @media screen and (max-width: 768px) {
      .box {
        width: 100%;
        display: flex;
        justify-content: space-between;
        height: 30px;
      }
    }
    .person {
      background: #1bc15b;
    }
    .bill {
      background: #12659a;
    }
    .finish {
      background: #b32cd1;
    }
    .article {
      background: #d6461c;
    }
    .serve {
      background: #717171;
    }
  }

  /*维修员服务排行*/
  .title {
    margin: 20px 0;
    width: 100%;
    line-height: 30px;
    color: #ffffff;
    text-align: center;
    background: #0076ab;
  }
  /*rank*/
  .ranks {
    display: flex;
    justify-content: center;
    .Tai {
      display: flex;
      margin: 0 3px;
      color: #0076ab;
      font-weight: bold;
      text-align: center;
      width: 150px;

      img {
        width: 15px;
      }
      .taiBox {
        position: relative;
        .txt {
          position: absolute;
          bottom: 20px;
          left: 0;
          right: 0;
          color: #ffffff;
          z-index: 999;
        }
      }

      .rank {
        border-bottom: 70px solid #0076ab;
        border-left: 45px solid transparent;
        border-right: 45px solid transparent;
        width: 80px;
        margin-left: -10px;
      }
      @media screen and (max-width: 768px) {
        .rank {
          width: 50px;
          margin-left: -2px;
          border-left: 40px solid transparent;
          border-right: 40px solid transparent;
        }
      }
      .rank2 {
        color: #ffffff;
        background: #0076ab;
        width: 100%;
        height: 60px;
        transform: skewX(-35deg);
      }
      .rank3 {
        color: #ffffff;
        background: #0076ab;
        width: 100%;
        height: 50px;
        transform: skewX(35deg);
      }
    }
    .first {
      flex-direction: column;
    }
    .second {
      flex-direction: column;
      margin-top: 10px;
    }
    .third {
      flex-direction: column;
      margin-top: 20px;
    }
  }
  /*图表*/
  #chartmain {
    width: 100%;
    height: 450px;
    margin-top: -30px;
  }
}
</style>